<template>
<div class="content">
  <div class="info-content">
    <div class="title">手机号码验证</div>
    <div class="form-block">
      <div class="form-info">
        <div class="title">手机号码</div>
        <div class="form-item">
          <input v-model="form.phone" class="form-ctrl phone" maxlength="11" type="text" placeholder="请输入你的手机号"/>
        </div>
      </div>
      <div class="form-info">
        <div class="title">验证码</div>
        <div class="form-item">
          <input v-model="form.mobileCode" class="form-ctrl code" maxlength="6" type="text" placeholder="请输入验证码"/>
          <div class="get-code" v-loading="sendCodeLoading" @click="sendAuthCode">{{ btnText }}</div>
        </div>
      </div>
    </div>
    <div class="btn-item">
      <div class="btn" @click="confirm">下一步</div>
    </div>
  </div>
</div>
</template>

<script>
import {sendMessageCodeApi} from "@/api/user";
import {validate} from "@/utils/validate";

export default {
  name: "change-password",
  data(){
    return{
      sendCodeLoading:false,
      btnText: "获取验证码",
      seconds: 0,
      countDown:null,
      form:{
        phone:'',
        mobileCode:''
      },
      rules: {
        phone: {
          name: '手机号码',
          required: true,
          validator: function (value, form, callback) {
            const phoneReg = /^((\+|00)86)?((134\d{4})|((13[0-3|5-9]|14[1|5-9]|15[0-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[0-2|5-9])\d{8}))$/;
            if (value.length !== 11) {
              callback('请输入正确的手机号');
            } else if (!phoneReg.test(value)) {
              callback('请输入正确的手机号');
            }
            callback();
          }
        },
        mobileCode: {
          name: '短信验证码',
          required: true,
          validator: function (value, form, callback) {
            if (value.length !== 6) {
              callback('请输入正确的短信验证码');
            }
            callback();
          }
        }
      },

    }
  },
methods: {
  //发送验证码
  sendAuthCode()
  {
    if (this.seconds === 0) {
      if (!this.form.phone) {
        this.$message.error('请先输入手机号码！');
        return;
      }
      if (this.sendCodeLoading) {
        return;
      }
      this.sendCodeLoading = true
      sendMessageCodeApi({mobile: this.form.phone, type: 1}).then(() => {
        this.$message.success('发送成功！');
        this.setCountDown(60)
      }).finally(() => {
        this.sendCodeLoading = false;
      })
    }
  },
  setCountDown(seconds)
  {
    this.countDown = setInterval(() => {
      seconds = seconds > 0 ? seconds - 1 : seconds;
      this.btnText = seconds > 0 ? `重新获取(${seconds}s)` : '获取验证码';
      this.seconds = seconds;
      if (seconds === 0) {
        clearInterval(this.countDown);
      }
    }, 1000)
  },
  confirm(){
    if(validate(this.form,this.rules)){
      this.formLoading=true;
      this.$router.replace({path:"/mine-center/change-password/password"});
    }
  }
}

}
</script>

<style scoped lang="scss">
.content{
  width: $contentWidth;
  min-height: $fullMinHeight;
  background: #fff;
  margin: 0 auto;

  .info-content{
    min-height: $minHeight;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title{
      margin-top: 60px;
      font-size: 22px;
    }
    .form-block{

      .form-info{
        display: flex;
        align-items: center;
        .title{
          width: 80px;
          margin-top: 30px;
          font-size: 16px;
          display: flex;
          justify-content: flex-end;
          margin-right: 20px;
        }
        .form-item {
          margin-top: 30px;
          width: 310px;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-radius: 30px;
          background: $lightGray;

          .form-ctrl {
            width: 100%;
            height: 40px;
            padding: 0 20px;
            background: none;
          }

          .form-ctrl.code {
            width: calc(100% - 90px);
          }

          .get-code {
            width: 100px;
            font-size: 13px;
            color: $orange;
            border-left: 1px solid $midGray;
            padding-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
    .btn-item {
      display: flex;
      justify-content: center;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
        height: 35px;
        width: 140px;
        border-radius: 30px;
        margin-left: 20px;
        background-color: $orange;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>